<template>
    <div >
        <div class="BCAs" v-if="none">
            <div>抱歉暂未有该文章</div>
        </div>
        <div class="BCAs" v-for='articlesm in articlesms' :key="articlesm.tid">
            <div class="BCAsimg"><router-link to="/Article"><img :src="`http://localhost:3000/upload/${articlesm.tlmg}`" alt=""></router-link></div>
            <router-link tag="h3" :to="{path:'/Article',query:{aid:articlesm.tId}}">{{articlesm.title}}</router-link>
            <p>{{articlesm.content}}</p>
            <div class="BCAsAuthor">
                <img :src="`http://localhost:3000/upload/${articlesm.headImg}`" alt="">{{articlesm.nickName}}
                <span>{{articlesm.tTime | time}}发布</span>
                <span class="dianzan">
                    <svg t="1600085653527" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6436" width="24" height="24"><path d="M499.432727 886.225455h-192.465454c-12.8 0-23.272727-10.472727-23.272728-23.272728s10.472727-23.272727 23.272728-23.272727h192.465454c12.8 0 23.272727 10.472727 23.272728 23.272727s-10.472727 23.272727-23.272728 23.272728z" fill="#fff" p-id="6437"></path><path d="M306.734545 886.225455H165.236364c-25.6 0-46.545455-20.945455-46.545455-46.545455V462.196364c0-25.6 20.945455-46.545455 46.545455-46.545455h141.498181c12.8 0 23.272727 10.472727 23.272728 23.272727v424.029091c0 12.8-10.24 23.272727-23.272728 23.272728zM165.236364 462.196364v377.483636h118.225454V462.196364H165.236364z" fill="#fff" p-id="6438"></path><path d="M737.978182 886.225455h-114.967273c-12.8 0-23.272727-10.472727-23.272727-23.272728s10.472727-23.272727 23.272727-23.272727h114.967273c11.636364 0 21.643636-8.378182 23.505454-20.014545l54.923637-329.774546c1.163636-6.981818-0.698182-13.963636-5.352728-19.316364-4.654545-5.352727-11.170909-8.378182-18.152727-8.378181h-224.116363c-21.643636 0-42.356364-11.403636-52.596364-28.858182-8.843636-14.894545-8.843636-32.116364-0.232727-47.243637 28.392727-50.269091 46.545455-171.054545 33.047272-190.138181-4.654545-4.421818-11.869091-10.472727-18.618181-10.472728-6.516364 0-13.963636 5.818182-18.85091 10.938182-3.258182 4.421818-11.869091 27.229091-18.850909 45.614546-30.952727 82.385455-83.083636 220.392727-186.181818 220.392727-12.8 0-23.272727-10.472727-23.272727-23.272727s10.472727-23.272727 23.272727-23.272728c70.981818 0 117.527273-123.810909 142.661818-190.138181 13.730909-36.305455 20.014545-52.829091 29.323637-62.138182 32.581818-32.581818 71.214545-32.349091 103.563636 0 40.029091 40.029091 1.629091 196.654545-25.832727 245.527272 0 2.094545 4.887273 6.749091 12.334545 6.749091h224.116364c20.712727 0 40.261818 9.076364 53.76 24.901819s19.083636 36.538182 15.592727 57.018181L807.563636 827.345455a70.283636 70.283636 0 0 1-69.585454 58.88z" fill="#fff" p-id="6439"></path></svg>
                </span>
                <span class="dianzans">X {{articlesm.likeCilck}}</span>
            </div>
            
        </div>
        
    </div>
</template>
<script>
export default {
    data(){
        return {
             sort: '',
             category:'%',
             articlesms:'',
             s:'',
             none:true
            }
    },
    created(){
      this.s=this.$route.path
      this.sort=this.$route.query.sort
      this.s=this.s.match(/[A-Za-z]*/ig)
      console.log('s',this.s[3])
       if(this.s[3]=='life'){
                this.category='%代码人生%'
                console.log(this.category)
            }
            else if(this.s[3]=='artificial'){
                this.category='人工智能'
            }
            else if(this.s[3]=='ios'){
                this.category='IOS'
            }
            else if(this.s[3]=='android'){
                this.category='Android'
            }
            else if(this.s[3]=='back'){
                this.category='后端'
            }
            else if(this.s[3]=='front'){
                this.category='前端'
            }
            else{
                this.category='%'
            }
    //   console.log('s',this.$route.fullPath)
      this.$axios.get('/api/article/articlepopular',{params:{category: this.category}})
        .then(res=>{
            if(res.data.data.length){
                this.none=false
            }
            this.articlesms=res.data.data
        //   console.log('res:',this.articlesms)
        })
        .catch(err=>{
        //   console.log('err:',err)
        })
    },
    watch:{
        $route(to,from){
            this.s=this.$route.path
            this.s=this.s.match(/[A-Za-z]*/ig)
            // console.log('s',this.s[3])
            if(this.s[3]=='life'){
                this.category='代码人生'
                console.log('1')
            }
            else if(this.s[3]=='artificial'){
                this.category='人工智能'
            }
            else if(this.s[3]=='ios'){
                this.category='IOS'
            }
            else if(this.s[3]=='android'){
                this.category='Android'
            }
            else if(this.s[3]=='back'){
                this.category='后端'
            }
            else if(this.s[3]=='front'){
                this.category='前端'
            }
            else{
                this.category='%'
            }
            this.sort=this.$route.query.sort
            if(this.sort=='popular'){
                this.$axios.get('/api/article/articlepopular',{params:{category: this.category}})
                .then(res=>{
                    if(res.data.data.length){
                        this.none=false
                    }
                    this.articlesms=res.data.data
                    // console.log('res:',this.articlesms)
                    
                })
                .catch(err=>{
                //   console.log('err:',err)
                })
            }
            else if(this.sort=='newest'){
                this.$axios.get('/api/article/articlenewest',{params:{category: this.category}})
                .then(res=>{
                    this.articlesms=res.data.data
                    // console.log('res:',this.articlesms)
                    
                })
                .catch(err=>{
                //   console.log('err:',err)
                })
            }
            else{
                this.$axios.get('/api/article/articlehottest',{params:{category: this.category}})
                .then(res=>{
                    this.articlesms=res.data.data
                    // console.log('res:',this.articlesms)
                    
                })
                .catch(err=>{
                //   console.log('err:',err)
                })
            }
        }
        
    },
    filters:{
      time:function(value){
         let pTime=[]
        for(let i=0;i<value.length;i++){
          if(value[i]!='T'){
            pTime.push(value[i])
          }else{
            break 
          }
        }
        let pTimes=pTime.join('')
        return pTimes
      }
    },
    methods: {
        
    },
}
</script>
<style>
    .BCAs{
        padding:10px 20px;
        margin: 10px 0px;
        width: 880px;
        box-sizing: border-box;
    }
    .BCAs h3{
        cursor: pointer;
        font-size: 20px;
        transition: all .3s;
    }
        
    .BCAs .BCAsimg{
        float: right;
        width: 190px;
        /* height: 150px; */
        
    }
    .BCAs .BCAsimg img{
        width: 190px;
        /* height: 140px; */
        object-fit: contain;
        margin-top: 20px;
    }
    .BCAs p{
        margin-bottom: 15px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        line-height: 1.5;
        color: #888;
        font-size: 13px;
        width: 680px;
        font-size: 16px;
    }
    .BCAs .BCAsAuthor img{
        float: left;
        width: 30px;
        height: 30px;
        border-radius: 4px;
        margin-right: 15px;
    }
    .BCAs .BCAsAuthor {
        line-height: 30px;
        letter-spacing: 0.1em;
        color:#555;
    }
    .BCAs .BCAsAuthor span{
        font-size: 14px;
        margin:0 10px;
        color: #888;
    }
    .BCAs .BCAsAuthor .dianzan{
        height: 30px;
        width: 30px;
        background-color: rgb(59, 181, 252);
        border-radius: 50%;
        position:absolute;
       padding-top: 3px;
       padding-left: 3px;
       transition: all .3s;
        /* display: inline; */
    }
    .BCAs .BCAsAuthor .dianzan:hover{
        background-color: rgb(0,162,255);
    }
    .BCAs .BCAsAuthor svg{
        margin-left: 2px;
        margin-top: -6px;
        fill:"#fff";
        /* vertical-align:none!important */
    }
    .BCAs .BCAsAuthor .dianzans{
        margin-left: 50px;
        color:rgb(0,162,255) ;
    }
</style>